<template>
  <div>
    <div class="banner">
      <h1>合作伙伴</h1>
    </div>
    <div class="cont">
      <p class="title">IB 经纪商计划</p>
      <p class="subTitle">最大化您的利润率，开发您的盈利潜力</p>
      <p class="paragraph">UKDFX 拥有最优秀的经纪人合作计划。从经纪人点差、有竞争力的交易条件、专属激励制度的定制，到功能完善的后台以及一对一的专业顾问和经验丰富分析师的支持。我们将专业性做到了享誉世界的极致。</p>
      <p class="subTitle">我们的合作计划优势</p>
      <p class="paragraph indent">● 激励制度个性化定制</p>
      <p class="paragraph indent">● 极富竞争力的交易条款</p>
      <p class="paragraph indent">● 灵活的杠杆设置，最大可至1：200</p>
      <p class="paragraph indent">● 极低点差</p>
      <p class="paragraph indent">● 免费获得每日市场最新动态和专家日评</p>
      <p class="paragraph indent">● 灵活的资金流动性</p>
      <p class="paragraph indent">● 与世界级顶级银行合作并在严格监管下运作，</p>
      <p class="paragraph indent"> &nbsp;&nbsp;&nbsp;&nbsp;资金绝对安全</p>
      <p class="paragraph indent">● 纯正STP模式，在互利共赢的情况下为您的长期客</p>
      <p class="paragraph indent"> &nbsp;&nbsp;&nbsp;&nbsp;户维护计划打下基础。</p>
      <p class="subTitle">请填写下列表格并送出申请， 我们将尽快安排您洽谈。</p>
      <div class="excel">
        <div>
          <input type="text" :placeholder="holder.company" v-bind:readonly="isReadOnly">
        </div>
        <div>
          <input type="text" :placeholder="holder.name" v-bind:readonly="isReadOnly">
        </div>
        <div>
          <input type="text" :placeholder="holder.tel" v-bind:readonly="isReadOnly">
        </div>
        <div>
          <input type="text" :placeholder="holder.email" v-bind:readonly="isReadOnly">
        </div>
        <div class="textarea">
          <textarea name="" id="" cols="30" rows="10" maxlength="200" :placeholder="holder.msg" v-bind:readonly="isReadOnly"></textarea>
          <span>0/200</span>
        </div>
        <div class="btn">提交信息</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        holder: {
          company: "公司名称",
          name: "姓名",
          tel: "电话",
          email: "邮箱",
          msg: "留言"
        },
        isReadOnly: true
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import './../../common/stylus/mixin'
  .banner
    width: 100%
    height: 200px
    background: url("../../../static/images/banner.jpg") no-repeat
    background-size: 100% 100%
    padding-top:116.5px
    padding-left:40px
    box-sizing: border-box
    h1
      font-size: 20px
      color: #fff
  .cont
    padding: 0 18px
    p
      color: #333
      font-size: 14px
      text-align: justify
      &.title
        display: block
        font-size: 18px
        font-weight: bold
        color: #ff9c00
        margin-top: 20px
        margin-bottom: 10px
      &.subTitle
        font-size: 16px
        color: #333
        margin: 20px 0 20px 0
        font-weight: bold
      &.indent
        text-indent: 20px
      &.paragraph
        margin-top: 20px
      &.lastparagraph
        margin-bottom: 20px
    .excel
      > div
        width: 339px
        height: 44px
        line-height: 44px
        background-color #f5f5f5
        border-radius: 2.5px
        font-size: 14px
        color: #999
        padding-left: 11px
        margin-bottom: 15px
        box-sizing: border-box
        &:last-child
          margin-bottom: 20px
        &.btn
          width: 100%
          height: 44px
          line-height: 44px
          border-radius: 2.5px
          background-color: #ffcc00
          font-size: 12px
          font-family: "苹方"
          text-align: center
          color: #333
          margin-bottom: 25px
        &.textarea
          width:100%
          height: 120px
          position: relative
          > textarea
            width: 100%
            height: 100%
            outline:none
            border: none
            background-color: transparent
          > span
            font-size: 12px
            color: ddd
            position: absolute
            right: 11px
            bottom: 0
        input
          background-color: #f5f5f5
          width: 100%
          height: 100%
          outline:none
</style>
